<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>东方·星言</title>
        <link href="css/styles.css" rel="stylesheet" />
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
        <style>
            /* 保证内容不被侧边栏遮挡，图片更美观 */
            @media (min-width: 992px) {
                #layoutSidenav_content {
                    margin-left: 250px;
                }
            }
            .card-img-top {
                object-fit: cover;
                width: 100%;
                height: 600px;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
            }
            .card {
                min-height: 600px;
                /* 让卡片更高，图片和文字都更舒展 */
            }
            @media (max-width: 991.98px) {
                .card-img-top {
                    height: 250px;
                }
                .card {
                    min-height: 400px;
                }
            }
            @media (max-width: 767.98px) {
                .card-img-top {
                    height: 180px;
                }
                .card {
                    min-height: 300px;
                }
            }
        </style>
    </head>
    <body class="sb-nav-fixed">
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <!-- Navbar Brand-->
            <a class="navbar-brand ps-3" href="statistics.html" style="font-size: 3rem;">首页</a>
            <!-- Sidebar Toggle-->
            <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
            <!-- Navbar Search-->
            <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
                    <button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
                </div>
            </form>
            <!-- Navbar-->
            <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#!" style="font-size: 2rem;">设置</a></li>
                        <li><a class="dropdown-item" href="#!" style="font-size: 2rem;">登录记录</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li><a id="logoutLink" class="dropdown-item" href="javascript:void(0)" style="font-size: 2rem;">登出</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                    <div class="sb-sidenav-menu">
                        <div class="nav">
                            <!-- <div class="sb-sidenav-menu-heading">导航栏</div> -->
                            <a class="nav-link" href="statistics.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                数据统计
                            </a>
                            <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
                                <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                                账号管理
                                <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                            </a>
                            <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
                                <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
                                    <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
                                        登录注册
                                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                                    </a>
                                    <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
                                        <nav class="sb-sidenav-menu-nested nav">
                                            <a class="nav-link" href="login.html">登录</a>
                                            <a class="nav-link" href="register.html">注册</a>
                                        </nav>
                                    </div>
                                    <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
                                        账号信息
                                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                                    </a>
                                    <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
                                        <nav class="sb-sidenav-menu-nested nav">
                                            <a class="nav-link" href="user.html">账号</a>
                                        </nav>
                                    </div>
                                </nav>
                            </div>
                            <a class="nav-link" href="Community.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
                                游戏介绍
                            </a>
                            <a class="nav-link" href="Vote.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                角色投票
                            </a>
                        </div>
                    </div>
                    <div class="sb-sidenav-footer">
                        <div class="big">东方·星言</div>
                    </div>
                </nav>
            </div>
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">游戏介绍</h1></br>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item active">游戏背景</li>
                        </ol>
                        <div class="row g-4">
                            <!-- 红魔馆 -->
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm border-0">
                                    <img src="Images/building_1.jpg" class="card-img-top img-fluid rounded-top" alt="红魔馆">
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-primary text-center">红魔馆</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            位于雾之湖附近的一座洋馆，通称“恶魔栖息之所”。由于咲夜操纵时间的能力，在干涉时间的同时红魔馆的空间也遭到了扭曲，导致红魔馆内部的空间与实际存在出入。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 人类村落 -->
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm border-0">
                                    <img src="Images/building_2.jpg" class="card-img-top img-fluid rounded-top" alt="人类村落">
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-success text-center">人类村落</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            人类村落是幻想乡一般人类居民居住的地方，也是幻想乡的人类最主要的聚居地。此外，上白泽慧音创建了一家寺子屋，主要招收村里的小孩，给村民提供教育服务。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 迷途竹林 -->
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm border-0">
                                    <img src="Images/building_3.jpg" class="card-img-top img-fluid rounded-top" alt="迷途竹林">
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-warning text-center">迷途竹林</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            幻想乡中一片广阔的竹林，从人类村落的位置看，位于妖怪之山的反方向。竹林中生长着数目众多的竹子，竹子生长速度很快，周围的景物也会随之改变，再加上地面不平，因此十分容易迷路。藤原妹红隐居在竹林中，组成了一个自警团，如果想要前往永远亭可以请她帮忙护卫，有人在竹林迷路了她也会提供帮助。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <!-- 博丽神社 -->
                            <div class="col-md-6">
                                <div class="card h-100 shadow-sm border-0">
                                    <img src="Images/building_4.jpg" class="card-img-top img-fluid rounded-top" alt="博丽神社">
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-danger text-center">博丽神社</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            博丽神社位于幻想乡的东侧边境，坐落于外面世界和幻想乡之间的分界线上，是幻想乡的标志性场景，出场贯穿全系列。神社是幻想乡内的著名赏樱景点和主要宴会场所。宴会举办十分频繁。八云紫等典型的妖怪经常出现在神社。比起人类参拜客，妖怪则更常出现。神社唯一的工作人员是巫女博丽灵梦，但连灵梦都不知道博丽神社供奉着什么神明。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ol class="breadcrumb mb-4">
                            <p></p></br>
                            <li class="breadcrumb-item active"></li></br>
                            <p></p>
                        </ol>
                        <ol class="breadcrumb mb-4">
                            <p></p></br>
                            <li class="breadcrumb-item active">具体关卡</li></br>
                            <p></p>
                        </ol>
                        <!-- 游戏大厅 -->
                        <div class="row g-4 justify-content-center">
                            <div class="col-md-12">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="text-center">
                                        <img src="Images/Game_cover.jpg" class="card-img-top img-fluid rounded-top" alt="游戏大厅" style="width: 60%; height: auto; max-height: 800px;">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-primary text-center">游戏大厅</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            欢迎来到幻想乡的入口——游戏大厅。这里是所有冒险的起点，玩家将在此选择关卡，准备迎接接下来的挑战。每个挑战都充满未知与神秘，激发着每一位勇者的探索欲望。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第一个关卡 - 博丽神社 -->
                        <div class="row g-4 justify-content-center">
                            <div class="col-md-12">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="text-center">
                                        <img src="Images/Game_1.jpg" class="card-img-top img-fluid rounded-top" alt="博丽神社" style="width: 60%; height: auto; max-height: 800px;">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-primary text-center">第一个关卡 - 博丽神社</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            博丽神社，位于幻想乡的东侧边境，是连接外界与幻想乡的桥梁。这座神社是幻想乡的文化象征，也是冒险者的起点。这里举办着频繁的宴会，吸引了各种妖怪与人类的到来。神社唯一的巫女——博丽灵梦，肩负着守护神社的重任，面对着来自各种敌人的挑战。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第二个关卡 - 迷途竹林 -->
                        <div class="row g-4 justify-content-center">
                            <div class="col-md-12">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="text-center">
                                        <img src="Images/Game_2.jpg" class="card-img-top img-fluid rounded-top" alt="迷途竹林" style="width: 60%; height: auto; max-height: 800px;">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-success text-center">第二个关卡 - 迷途竹林</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            迷途竹林，广袤无垠，弯曲的小径在林中不断变换，常使人迷失方向。竹林内生活着藤原妹红，她成立了自警团保护过路人免受妖怪侵害。竹林的景色随着季节变化而变化，走在其中，你将与迷雾、奇异的生物以及失落的记忆相遇，感受这片神秘地带的独特魅力。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第三个关卡 - 红魔馆 -->
                        <div class="row g-4 justify-content-center">
                            <div class="col-md-12">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="text-center">
                                        <img src="Images/Game_3.jpg" class="card-img-top img-fluid rounded-top" alt="红魔馆" style="width: 60%; height: auto; max-height: 800px;">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-danger text-center">第三个关卡 - 红魔馆</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            红魔馆，坐落于雾之湖的阴暗一隅，是吸血鬼丽娜的家。这座阴森的洋馆常年被浓雾笼罩，空间与时间在这里扭曲。咲夜作为红魔馆的管家，她的时间操控能力让馆内的空间结构不断变化，挑战者们在此需要面对不止是敌人的攻击，还有曲折变化的环境考验。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 第四个关卡 - 人类村落 -->
                        <div class="row g-4 justify-content-center">
                            <div class="col-md-12">
                                <div class="card h-100 shadow-sm border-0">
                                    <div class="text-center">
                                        <img src="Images/Game_4.jpg" class="card-img-top img-fluid rounded-top" alt="人类村落" style="width: 60%; height: auto; max-height: 800px;">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h4 class="card-title mb-3 text-warning text-center">第四个关卡 - 人类村落</h4>
                                        <p class="card-text text-justify" style="font-size:1.15rem;">
                                            人类村落是幻想乡中的一片和平之地，这里居住着幻想乡的大多数人类。在村落中，上白泽慧音经营着一所寺子屋，为村中的孩子们提供教育。然而，和平的表面下也暗藏着威胁，妖怪时常出现在村落周围。作为冒险者，你的使命是保护这个宁静的小村落免受外来威胁。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-5">
                            <a href="./downloads/keine.png" download>
                                <button type="button" class="btn btn-outline-primary btn-lg px-5">下载安装包</button>
                            </a>
                        </div>
                    </div>
                </main>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
        <script src="js/logout.js"></script>
    </body>
</html>